<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单数据交互</title>
    <script src="../my.js"></script>
    <script>
        function helloWorld(){
            $.get("../hello.s", (res)=>{
                hello.innerText = res;
            })
        }
        function getUser(){
            let input = document.querySelector("input[name='id']");
            let id = input.value;
            $.get("../getUser.s?id=" + id, (res)=>{
                res = JSON.parse(res);
                if(res.code == 1){
                    let uname = document.querySelector("input[name='uname']");
                    let regtime = document.querySelector("input[name='regtime']");
                    let gender0 = document.querySelector("input[name='gender'][value='0']");
                    let gender1 = document.querySelector("input[name='gender'][value='1']");
                    uname.value = res.data.uname;
                    regtime.value = res.data.regtime;
                    if(res.data.gender == 1){
                        gender1.checked = true;
                        gender0.checked = false;
                    } else {
                        gender1.checked = false;
                        gender0.checked = true;
                    }
                } else {
                    alert(res.msg);
                }

            })
        }
    </script>
</head>
<body>
<fieldset>
    <legend>从服务器获取简单数据</legend>
    <form>
        <div>
            <button formaction="../hello.s">表单: hello world</button>
            <button type="button" onclick="helloWorld()">AJAX: hello world</button>
            <span id="hello"></span><br>

            <button formaction="now">表单: 获取服务器当前时间</button>
            <button type="button">AJAX: 获取服务器当前时间</button>
            <span id="now"></span><br>

            <button formaction="days">表单: 下周三是几号</button>
            <button type="button">AJAX: 下周三是几号</button>
            <span id="days"></span><br>

            <input placeholder="输入名称" id="name" name="name">
            <button formaction="hello">表单: hello</button>
            <button type="button">AJAX: hello</button>
            <span id="helloMan"></span><br>

        </div>
    </form>
</fieldset>
<fieldset>
    <legend>加减乘除</legend>
    <form>
        <div>
            <input placeholder="输入数字" type="number" id="a1" name="a1"> + <input placeholder="输入数字" type="number" id="b1" name="b1">
            <button formaction="add">表单: =</button>
            <button formaction="add" type="button">AJAX: =</button>
            <span id="r1"></span><br>

            <input placeholder="输入数字" type="number" id="a2" name="a2"> + <input placeholder="输入数字" type="number" id="b2" name="b2">
            <button formaction="add">表单: =</button>
            <button formaction="add" type="button">AJAX: =</button>
            <span id="r2"></span><br>

            <input placeholder="输入数字" type="number" id="a3" name="a3"> + <input placeholder="输入数字" type="number" id="b3" name="b3">
            <button formaction="add">表单: =</button>
            <button formaction="add" type="button">AJAX: =</button>
            <span id="r3"></span><br>

            <input placeholder="输入数字" type="number" id="a4" name="a4"> + <input placeholder="输入数字" type="number" id="b4" name="b4">
            <button formaction="add">表单: =</button>
            <button formaction="add" type="button">AJAX: =</button>
            <span id="r4"></span><br>
        </div>
    </form>
</fieldset>

<fieldset>
    <legend>检索用户信息</legend>
    <form>
        <div>
            编号: <input name="id">
                 <!-- type="button" 表示普通按钮, 不触发提交动作 -->
                 <button type="button" onclick="getUser()">检索</button><br>
            账号: <input name="uname"><br>
            注册: <input name="regtime"><br>
            性别: <input name="gender" type="radio" value="1">男
                 <input name="gender" type="radio" value="0">女<br>
        </div>
    </form>
    <hr>
    <dl>
        <dt>附件</dt>
        <dd>
            <ul>
                <li><a href="/easy/tbl_user/down">BBS用户表SQL</a></li>
            </ul>
        </dd>
    </dl>
</fieldset>
</body>
</html>















<style>
    * {
        vertical-align: middle;
    }

    fieldset {
        width: 80%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        display: inline-block;
        width: 200px;
        background-color: #eee;
        line-height: 30px;
        vertical-align: middle;
    }

    input, button, span {
        height: 30px;
        text-align: center;
        box-sizing: border-box;
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>